<template>
<router-link :to="'/lendng-product/detail/' + product.id">
  <el-card class="product-item" v-bind:class="product.state === 0 ? 'product-disable' : 'product-enable'">
    <div slot="header" class="clearfix">
      <el-tag type="info" v-show="product.state === -1">待发布</el-tag>
      <el-tag type="primary" v-show="product.state === 1">正常</el-tag>
      &nbsp;&nbsp;
        <span>{{ product.title }}</span>
      
      <el-button style="float: right; padding: 5px 10px" type="danger" @click="deleteProduct(product.id)">删除</el-button>
      <el-button v-show="product.state === 1" style="float: right; padding: 5px 10px; margin: 0 5px;" type="info"
        @click="setDown(product.id)">下架</el-button>
      <el-button v-show="product.state == -1" style="float: right; padding: 5px 10px; margin: 0 5px;" type="success"
        @click="setUp(product.id)">上架</el-button>
    </div>
    <p>{{ filtersText(product.content) }}</p>
    <el-descriptions class="margin-top item-condition" :column="1" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item>
        <template slot="label">贷款金额</template>
        <span>{{ product.query.loanAmnt }}&nbsp;元</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">贷款分期</template>
        <span>{{ product.query.term }}&nbsp;期</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">贷款利率</template>
        <span>{{ product.query.interestRate }}&nbsp;%</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">分期付款金额</template>
        <span>{{ product.query.installment }}&nbsp;元</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</router-link>
</template>

<script>
import invitationApi from '@/api/invitation'
export default {
  props: {
    product: {
      type: Object,
      default: null
    }
  },
  methods: {
    filtersText(val) { // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != '') {

        var re1 = new RegExp("<.+?>", "g")
        var msg = val.replace(re1, '')

        return msg.substr(0, 50);//获取富文本文字内容的前50个字符
      } else return ''
    },
    deleteProduct(id) {
      this.$confirm('删除该项产品吗，删除后将无法恢复记录', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        let arr = [];
        arr.push(id);
        invitationApi.delete(arr)
          .then(response => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$emit('listRefresh')
          })
      }).catch(() => { })
    },
    setUp(id) {
      this.$confirm('是否上架该产品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        // 调用删除的方法
        invitationApi.pass(id)
          .then(response => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            // 回到列表页面
            this.$emit('listRefresh')
          })
      }) // 点击取消，执行catch方法
    },
    setDown(id) {
      this.$confirm('是否下架该产品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        // 调用删除的方法
        invitationApi.deny(id)
          .then(response => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            // 回到列表页面
            this.$emit('listRefresh')
          })
      }) // 点击取消，执行catch方法
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.product-item {
  margin-bottom: 20px;
  min-width: 400px;
  margin-left: 20px;
  margin-right: 20px;

  .text.item {
    display: flex;

    .product-item-info-name {
      margin-right: 40px;
    }
  }
}
</style>
